Day21【每天5分鐘】學前端 | JavaScript 流程控制 switch case

14th鐵人賽 javascript switch

Olivia

2022-09-22 19:56:26

1232 瀏覽

分享至

昨天認識了 流程控制 的 if else ，今天來認識另外一個 switch case ，
目的都是根據不同的條件，執行不同的操作。

switch case

switch 的後面有一對小括號 ( ) ， ( ) 內放入要判斷的條件，
若 條件值 符合 case 後面的值，執行該 case 下的操作。case 可以有很多個。
switch 使用 嚴格相等（===） 的比較，也就是說會比較型別。
" 1 "（字串）和 1（數字）視為不同。

程式碼是由 上到下 去判斷的，break; 的作用是會跳出該流程控制。
若所有的 case 值都不符合，則執行 default 下的操作。

★ break; 很重要，要記得加喔！

格式如下：

switch ( x ){
    case y :
        若 x 值符合上述 y , 執行此區塊
        break;
    case z :
        若 x 值符合上述 z , 執行此區塊
        break;
    default:
        若 x 值和以上 y & z 都不符合, 執行此區塊
        break;
}

舉例：

let fruit = "apple";

switch (fruit){
    case "apple":
        console.log("蘋果");
        break;
    case "orange":
        console.log("橘子");
        break;
    default:
        console.log("其他水果");
        break;
}
// 主控台顯示：蘋果

解說：

let fruit = "orange"; // 自訂義變數 fruit 的值為字串 orange

switch (fruit){ // 要來比對 fruit 的值囉!
    case "apple": // 如果 fruit 的值是 apple 就進來（哇不是，那掰掰~~）
        console.log("蘋果");
        break;
    case "orange": // 如果 fruit 的值是 orange 就進來（沒錯，進去看看要做什麼事情）
        console.log("橘子"); // 要在主控台顯示：橘子
        break; // 跳出流程控制
    default:
        console.log("其他水果");
        break;
}
// 主控台顯示：橘子

let fruit = "apple";	let fruit = "orange";	let fruit = "kiwi";

蘋果	橘子	其他水果

如果忘記加 break 會發生什麼事？

switch 的特性是會比對條件值是否符合 case 的值，
然後執行這個 case 裡面的操作，
以及此一符合 case 以外，剩下其他的操作，直到它遇見 break;

如果不加 break; 讓它跳出流程控制的話，
它只要找到一個符合的 case ，除了執行該 case 的操作以外，
後面的所有操作，它也 都會幫你執行 。

我們來看看上述範例，沒加 break; 的話會變成怎麼樣 ...

let fruit = "apple";	let fruit = "orange";	let fruit = "kiwi";

蘋果、橘子、其他水果	橘子、其他水果	其他水果

小明跟月老許願，他想要有一個可愛的女朋友，
他寫了一段程式碼：

// 可是他忘記在每個 case 後面加上 break; 了
let myGirl = "cute";
switch(myGirl){
    case "cute":
        console.log("可愛的女朋友");
    case "crazy":
        console.log("瘋狂的女朋友");
    default:
        console.log("壞心的女朋友");
        break;
}

月老看到程式碼很開心：噢噢我最近也學了 JavaScript 的 switch！
發現第一個 case 符合，於是把剩下的通通都塞給小明了，直到遇見 break; 結案。